<template>
  <div class="video-upload-container">
    <!-- 上传组件 -->
    <el-upload
      class="video-upload"
      :action="uploadUrl"
      :show-file-list="false"
      :on-success="handleUploadSuccess"
      :on-error="handleUploadError"
      :before-upload="beforeUpload"
      :headers="headers"
      :limit="1"
      accept="video/*"
    >
      <el-button size="small" type="primary">点击上传视频</el-button>
      <div slot="tip" class="el-upload__tip">支持 mp4、avi、mov 等视频格式，大小不超过 100MB</div>
    </el-upload>

    <!-- 视频预览区域 -->
    <div v-if="videoUrl" class="video-preview">
      <video
        ref="videoPlayer"
        controls
        :src="videoUrl"
        class="video-player"
      ></video>

      <div class="video-info">
        <el-button
          size="mini"
          type="danger"
          @click="removeVideo"
        >删除视频</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth"
export default {
  name: 'MediaUpload',
  props: {
    value: {
      type: String  // 用于v-model绑定视频URL
    },
    // 上传接口地址
    action: {
      type: String,
      default: "/minio/upload"
    },
  },
  data() {
    return {
      uploadUrl: process.env.VUE_APP_BASE_API + this.action, // 上传的图片服务器地址
      videoUrl: '',  // 视频URL
      file: null,     // 上传的文件对象
      headers: {
        Authorization: "Bearer " + getToken(),
      },
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        if (newVal && newVal !== this.videoUrl) {
          this.videoUrl = newVal
        }
      }
    }
  },
  methods: {
    // 上传前的校验
    beforeUpload(file) {
      const isVideo = file.type.includes('video/')
      const isLt100M = file.size / 1024 / 1024 < 100

      if (!isVideo) {
        this.$message.error('只能上传视频文件!')
        return false
      }
      if (!isLt100M) {
        this.$message.error('视频大小不能超过 100MB!')
        return false
      }

      // 保存文件信息用于显示
      this.file = file

      return true
    },

    // 上传成功回调
    handleUploadSuccess(response, file) {
      console.log('handleUploadSuccess:',response)
      // 根据你的API返回结构调整
      this.videoUrl = response.url || URL.createObjectURL(file.raw)
      this.$emit('input', this.videoUrl) // 更新v-model
      this.$message.success('视频上传成功!')
    },

    // 上传失败回调
    handleUploadError(err, file) {
      console.error('上传失败:', err)
      this.$message.error('视频上传失败!')
    },

    // 删除视频
    removeVideo() {
      this.videoUrl = ''
      this.file = null
      this.$emit('input', '') // 清空v-model
    },

    // 格式化文件大小
    formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes'
      const k = 1024
      const sizes = ['Bytes', 'KB', 'MB', 'GB']
      const i = Math.floor(Math.log(bytes) / Math.log(k))
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
    }
  }
}
</script>

<style scoped>
.video-upload-container {
  width: 100%;
  max-width: 600px;
}

.video-preview {
  margin-top: 20px;
  padding: 15px;
  border: 1px dashed #ddd;
  border-radius: 4px;
  background-color: #fafafa;
}

.video-player {
  width: 100%;
  max-height: 400px;
  background-color: #000;
  border-radius: 4px;
}

.video-info {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.video-info p {
  margin: 5px 0;
}

.el-upload__tip {
  margin-top: 7px;
  color: #999;
  font-size: 12px;
}
</style>
